<template>
  <el-container>
    <basic-crud :option="option" ref="basicCrudRef" selectType="multiple" businessUrl="/obj/linkTypeController">
      <template #menu-left>
        <el-button plain type="primary" icon="Document" @click="handleExportAll"
          :loading="exportAllLoading">全部导出到word</el-button>
        <el-button plain type="primary" icon="Document" @click="handleExportSelect"
          :loading="exportSelectLoading">选择导出到word</el-button>
        <el-button plain type="primary" icon="CopyDocument" @click="handleCopy">克隆</el-button>
      </template>
      <template #menu="{ row }">
        <el-button link type="primary" icon="Connection" @click="handleOpenAttrManage(row)">属性管理</el-button>
      </template>
    </basic-crud>
    <AttrManageDialog v-model="visibleAttr" :title="attrTitle" :apiListParams="apiListParams"
      :apiAddParams="apiAddAndEditAndDelParams" :apiEditParams="apiAddAndEditAndDelParams"
      :apiDelParams="apiAddAndEditAndDelParams" :curRow="curRow"></AttrManageDialog>
    <busEr ref="busErRef"></busEr>
  </el-container>

</template>

<script setup>
import { apiGetBusTypeList } from '@/apis/objectModel/linkType.js'
import { apiExport } from '../../../apis/global'
import { ElMessage } from 'element-plus'
import AttrManageDialog from './components/AttrManageDialog.vue'
import busEr from './components/busEr.vue'
import { reactive } from 'vue'
const basicCrudRef = ref()
const busList = ref([])
const getBusList = async () => {
  busList.value = await apiGetBusTypeList({
    pageSize: -1,
    pageNum: 1,
  })
}
getBusList()
const option = {
  viewBtn: true,
  searchSpan: 6,
  menuWidth: 260,
  column: [
    {
      label: '英文名称',
      prop: 'code',
      search: true,
      width: 120,
      overHidden: true,
      fixed: true,
      maxlength: 20,
      showWordLimit: true,
      sortable: true,
      rules: [{ required: true, message: '英文名称不能为空', trigger: 'blur' }],
    },
    {
      label: '中文名称',
      prop: 'name',
      width: 180,
      search: true,
      overHidden: true,
      sortable: true,
      rules: [{ required: true, message: '中文名称不能为空', trigger: 'blur' }],
    },
    {
      label: '数据库表',
      prop: 'tableName',
      width: 130,
      search: true,
      overHidden: true,
      sortable: true,
    },
    {
      label: '来源端业务类型',
      prop: 'sourceBusName',
      width: 300,
      overHidden: true,
      component: 'BasicCrudTableSelect',
      dataType: 'business',
      comProps: {
        saveFieldMap: { sourceBusName: 'name', sourceBus: 'code' },
        selectedKey: 'code',
      },
    },
    {
      label: '目标端业务类型',
      prop: 'targetBusName',
      width: 300,
      overHidden: true,
      component: 'BasicCrudTableSelect',
      dataType: 'business',
      comProps: {
        showField: 'targetBusName',
        saveFieldMap: { targetBusName: 'name', targetBus: 'code' },
        selectedKey: 'code',
      },
    },
    {
      label: '类全路径',
      prop: 'classFullName',
      width: 130,
      overHidden: true,
      clearable: true,
    },
    {
      label: '描述',
      overHidden: true,
      prop: 'des',
      type: 'textarea',
      span: 24,
    },
  ],
}

const exportAllLoading = ref(false)
const exportSelectLoading = ref(false)
// 导出所有
const handleExportAll = async () => {
  apiExport(
    'obj/linkTypeController/exportWord',
    { all: true },
    exportAllLoading
  )
}
// 选择导出
const handleExportSelect = () => {
  const selectData = basicCrudRef.value.selectData
  if (selectData.length === 0) {
    return ElMessage.warning('请选择导出数据！')
  }
  apiExport(
    'obj/linkTypeController/exportWord',
    { ids: selectData.map((item) => item.id) },
    exportSelectLoading
  )
}
// 克隆
const handleCopy = () => {
  const selectData = basicCrudRef.value.selectData
  if (selectData.length !== 1) {
    return ElMessage.warning('请选择一条数据进行操作！')
  }
  basicCrudRef.value.crudRef.rowAdd()
  basicCrudRef.value.formData = Object.assign({}, selectData[0], {
    cloneFlag: true,
    cloneSourceId: selectData[0]['id'],
    id: undefined,
  })
}
const curRow = ref({})
const useAttrManage = () => {
  // 属性弹窗标题
  const title = ref('')
  const visible = ref(false)
  const apiListParams = reactive({
    sourceIds: [],
    pageSize: -1,
  })
  const apiAddAndEditAndDelParams = reactive({
    sourceId: undefined,
    sourceBus: undefined,
  })
  const handleOpenAttrManage = (row) => {
    curRow.value = row
    visible.value = true
    title.value = `[ ${row.name} ] 的属性列表`
    apiListParams.sourceIds = [row.id]
    apiAddAndEditAndDelParams.sourceBus = row.bus
    apiAddAndEditAndDelParams.sourceId = row.id
  }
  return {
    title,
    visible,
    handleOpenAttrManage,
    apiListParams,
    apiAddAndEditAndDelParams,
  }
}
const {
  visible: visibleAttr,
  title: attrTitle,
  handleOpenAttrManage,
  apiListParams,
  apiAddAndEditAndDelParams,
} = useAttrManage()
</script>

<style lang="scss" scoped></style>
